import React, { Component } from 'react'
import classNames from 'classnames'

import FilterFooter from '../../../../components/FilterFooter'

import styles from './index.module.css'

export default class FilterMore extends Component {
  state = {
    select: this.props.slectedValue.more
  }

  handleClick = value => {
    const { select } = this.state
    let newSelect = []
    if (select[0] === 'null') {
      // console.log(1111)
      newSelect[0] = value
    } else if (select.indexOf(value) > -1) {
      newSelect = select.filter(e => e !== value)
    } else {
      newSelect = [...select, value]
    }
    this.setState({
      select: newSelect
    })
  }

  // 渲染标签
  renderFilters(data) {
    // 高亮类名： styles.tagActive [styles.tag, styles.tagActive]
    const { select } = this.state
    return data.map(e => {
      const isActive = select.indexOf(e.value) > -1
      return (
        <span
          className={classNames(styles.tag, { [styles.tagActive]: isActive })}
          key={e.value}
          onClick={() => {
            this.handleClick(e.value)
          }}
        >
          {e.label}
        </span>
      )
    })
  }

  onCancel = () => {
    this.setState({ select: [] })
    this.props.onCancel()
  }

  onOk = () => {
    // console.log(this.state.select)
    this.props.onOk(this.state.select)
  }

  hidePicker = () => {
    this.props.hidePicker()
  }

  render() {
    const { roomType, oriented, floor, characteristic } = this.props.data
    // console.log(this.props)
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        <div className={styles.mask} onClick={this.hidePicker} />
        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>
        </div>

        {/* 底部按钮 */}
        <FilterFooter
          className={styles.footer}
          onCancel={this.onCancel}
          onOk={this.onOk}
          cancelText="清除"
        />
      </div>
    )
  }
}
